<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--    引入css 样式-->
  <link rel="stylesheet"  href="/layui/css/layui.css">
  <!--    引入js -->
  <script src="/layui/layui.js"></script>
</head>
<body >
<div style="margin-top: 30px;margin-left: 20%;width: 60%">
    <form class="layui-form layui-form-pane" lay-filter="test1" action="">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">宠物名称：</label>
            <div class="layui-input-block">
                <input type="text" name="name" required  lay-verify="required" placeholder="请输入宠物名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-item">
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">宠物生日：</label>
                    <div class="layui-input-block">
                        <input type="text" name="birthday" id="date1" placeholder="请输入生日" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="stamp" value="猫" title="猫" checked="">
                    <input type="radio" name="stamp" value="狗" title="狗">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">宠物品种：</label>
                <div class="layui-input-block">
                    <input type="text" name="breed" required  lay-verify="required" placeholder="请输入宠物品种" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">头像：</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="test1">
                            <i class="layui-icon">&#xe67c;</i>上传头像
                        </button>
                        <input type="hidden" id="img1" name="picture">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">宠物简介：</label>
                    <div class="layui-input-block">
                        <input type="text" name="info" required  lay-verify="required" placeholder="请输入宠物简介" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">修改宠物</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
         </form>

</div>
<script>
    //从本地存储获取对应的数据 localStorage.getItem 存储的数据是json的格式
    var obj=JSON.parse(localStorage.getItem("animal"))
    //Demo
    layui.use(['form','laydate'], function(){
        var form = layui.form,
            laydate=layui.laydate,
            $=layui.$;
        //修改页面，需要为表单赋值
        form.val("test1",obj);
        //执行一个laydate实例
        laydate.render({
            elem: '#date1' //指定元素
        });
        //提交
        form.on('submit(formDemo)', function(data){
            //请求新增接口 Ajax post
            $.post("/api/animal/update.do",data.field,function (res){
                //验证接口的返回 是否成功
                if(res.code==0){
                    layer.msg("亲，修改成功！");
                    location.href="animal_list.html";
                }else {
                    layer.msg(res.data);
                }
            });
            return false;
        });
    });
</script>
</body>
</html>